import tpl from './tpl/wrapper.tpl';
import itemTpl from './tpl/item.tpl';
import './index.scss';

import { ShowBoard } from '../../components/show_board';
import { NoDataTip } from '../../components/no_data_tip';

import tools from '../../utils/tools';

class Tab {
    constructor(el, fieldDatas, phoneDatas) {
        this.name = 'tab';
        this.$el = el;
        this.fieldDatas = fieldDatas;
        this.phoneDatas = phoneDatas;

        this.noDataTip = new NoDataTip();

        this.cache = {};
        
    }

    async init() {
        await this.render();
        this.bindEvent();
    }

    async render() {
        let list = '';

        this.fieldDatas.forEach((item, idx) => {
            list += tools.tplReplace(itemTpl(), {
                field: item.field,
                series_name: item.series_name
            })
        });

        await this.$el.append(tools.tplReplace(tpl(), { list }));
    }

    bindEvent() {
        const $tab = $('.J_tab'),
              $board = $('.J_board'),
              $searchInput = $('#J_search'),
              oShowBoard = new ShowBoard();

        $tab.on('click', '.tab-item', { $board, oShowBoard }, $.proxy(this.tabClick, this));
        $searchInput.on('input', { $board, oShowBoard, $tab }, tools.throttle($.proxy(this.inputSearch, this), 1000));
    }

    tabClick(e) {
        const tar = e.target,
              $tar = $(tar),
              tagName = tar.tagName.toLowerCase();
        
        const data = e.data,//jQ中事件绑定传进来的参数就在e.data中
              $board = data.$board,
              oShowBoard = data.oShowBoard;

        if(tagName === 'a') {
            const field = $tar.attr('data-field');

            this.tabChange($tar)
            this.appendList(field, $board, oShowBoard)
        }
    }

    inputSearch(e) {
        const tar = e.target,
              $tar = $(tar),
              value = tools.trimSpaces($tar.val()),
              valLen = value.length;

        const data = e.data,
              $board = data.$board,
              $tab = data.$tab,
              oShowBoard = data.oShowBoard;

        this.tabChange($tab.find('.all'));

        if(valLen <= 0) {
            this.appendList('all', $board, oShowBoard);
        } else {
            this.appendList('all', $board, oShowBoard, value);
        }
    }

    tabChange($target) {
        $target.parent().addClass('current')
               .siblings().removeClass('current');
    }

    appendList(field, $board, oShowBoard, keyword) {
        if(keyword) {
            let data = this.filterdDatas(this.phoneDatas, field, keyword),
                dataLen = data.length;

            if(dataLen === 0) {
                $board.html(this.noDataTip.tpl('未搜索到相关数据'));
            } else {
                $board.html(oShowBoard.makeList(data));
            }
        } else {
            if(!this.cache[field]) {
                this.cache[field] = oShowBoard.makeList(this.filterdDatas(this.phoneDatas, field));
            }

            $board.html(this.cache[field]);
        }
    }

    filterdDatas(datas, field, keyword) {
        return datas.filter((item, idx) => {
            if(keyword) {
                const phone_name = tools.trimSpaces(item.phone_name.toLowerCase()),
                      slogan = tools.trimSpaces(item.slogan.toLowerCase());

                keyword = keyword.toLowerCase();

                return phone_name.includes(keyword) || slogan.includes(keyword);
            } else {
                switch(field) {
                    case 'all':
                        return true;
                        break;
                    default:
                        return item.field === field;
                        break;
                }
            }
        })
    }
}

export { Tab }